<template>
  <div class="main-info">
    <div class="animated-background">
      <div class="geometric-shape hexagon"></div>
      <div class="geometric-shape circle"></div>
      <div class="geometric-shape square"></div>
      <div class="geometric-shape triangle"></div>
      <div class="particle-group">
        <div class="particle" v-for="n in 8" :key="n"></div>
      </div>
    </div>
    <div class="content-container padding-20" v-loading="loading">
      <div class="tabs-warp">
        <el-tabs
          v-model="activeTab"
          class="main-tabs"
          @tab-change="handleTabsChange"
        >
          <el-tab-pane
            v-for="item in competitions"
            :key="item.title"
            :label="item.title"
            :name="item.key"
          >
          </el-tab-pane>
        </el-tabs>
        <upload-excel-component :url="excelUrl" @upload-end="handleImportEnd" />
      </div>
      <div class="tabs-warp">
        <el-tabs
          v-model="activeName"
          type="card"
          class="small-tabs"
          @tab-change="handleChange"
        >
          <el-tab-pane label="参赛人员" name="participants"></el-tab-pane>
          <el-tab-pane label="比赛详情" name="details"></el-tab-pane>
        </el-tabs>
      </div>
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import UploadExcelComponent from '@/components/uploadExcelComponent.vue'
import { infoApi } from '@/api/modules'
import useAppStore from '@/store/modules/app.js'

const appStore = useAppStore()

const router = useRouter()

const competitions = computed(() => appStore.competitions)
const activeTab = computed(() => appStore.activeTab)
const activeName = ref('participants')

let loading = ref(false)

const handleTabsChange = (val) => {
  appStore.setActiveTab(val)
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
  // TODO: 重新加载数据
}

const handleChange = (val) => {
  activeName.value = val
  loading.value = true
  router.push(`/tabs/${val}`)
  setTimeout(() => {
    loading.value = false
  }, 500)
  // TODO: 重新加载数据
}

const changeActiveTabs = async () => {
  try {
    await nextTick()
    if (router.currentRoute.value?.params) {
      activeTab.value = router.currentRoute.value.params.name
      activeName.value = router.currentRoute.value.name
    }
  } catch (error) {
    console.error('Error in changeActiveTabs:', error)
  }
}
const excelUrl = ref(infoApi.excelExport.url)

const handleImportEnd = (response) => {
  appStore.setRefreshFlag(true)
}

onMounted(() => {
  changeActiveTabs()
})
</script>

<style lang="scss" scoped>
.content-container {
  &.padding-20 {
    padding: 20px;
  }

  :deep .el-tabs__nav-wrap::after {
    visibility: hidden;
  }

  .small-tabs {
    :deep .el-tabs__header {
      border-bottom: none;
    }

    :deep .el-tabs__nav {
      border: none;
    }

    :deep .el-tabs__item {
      height: 36px;
      border: 1px solid #dcdfe6;

      &:first-child {
        border-left: 1px solid #dcdfe6;
        border-right-width: 0;
        border-radius: 4px 0 0 4px;
      }

      &:last-child {
        border-radius: 0 4px 4px 0;
      }

      &.is-active {
        color: white;
        background-color: var(--el-color-primary);
        border-color: var(--el-color-primary);
      }
    }
  }

  .tabs-warp {
    display: flex;
    align-content: center;
    justify-content: space-between;
  }
}

.filter-row {
  .action-buttons {
    display: flex;
  }
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
